<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>企业站</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
        /* 清除列表的默认样式 */
      }
      a {
        text-decoration: none;
        /* 清除下划线 */
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 16px;
        font-weight: normal; /*取消加粗字体粗细*/
      }
      .header {
        width: 966px;
        height: 99px;
        background: red;
        margin: 0px auto;
      }
      .logo/*左边的*/ {
        width: 284px;
        height: 99px;
        background: yellow;
        float: left;
      }
      .logo img {
        margin-top: 34px;
      }
      .search/*右边*/ {
        width: 230px;
        height: 99px;
        background: green;
        float: right;
      }
      .search .text /*搜索框里*/ {
        width: 210px;
        height: 26px;
        background: #f1f1f1 url(images/search.jpg) no-repeat 202px center;
        border: 1px solid #e5e5e5;
        font-size: 12px;
        color: #858585;
        line-height: 26px;
        padding-left: 15px;
        margin-top: 39px;
      }
      /* 网页的导航 nav  */
      .nav-wrap {
        background: #2f2f2f;
      }
      .nav/*导航*/ {
        width: 966px;
        height: 58px;
        background: #2d2d2d;
        margin: 0 auto;
      }
      .nav a {
        float: left;
        width: 119px;
        height: 58px;
        border-right: 1px solid #484848;
        text-align: center;
        line-height: 58px;
        font-size: 12px;
      }
      .nav a {
        color: #ffffff;
      }
      .nav .first-nav {
        padding-left: 5px;
      }
      .nav .last-nav {
        border-right: none;
      }
      .banner/*广告图*/ {
        width: 1346px;
        height: 466px;
        background: #606060;
        margin: 0 auto;
      }

      .news/*新闻*/ {
        width: 966px;
        height: 270px;
        background: orange;
        margin: 0 auto;
      }
      .news div/*整个新闻div*/ {
        height: 240px;
        float: left;
      }
      .news-title/*news里的标题*/ {
        font-size: 18px;
        color: #41434f;
        margin-top: 36px;
      }
      .news-left {
        width: 463px;
        background: skyblue;
      }
      .news-left-list/*news里的list全部*/ {
        margin-top: 22px;
      }
      .news-left-list li/*news里的li全部*/ {
        width: 450px;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        border: 1px solid #000;
        background: url(images/news-list.jpg) no-repeat left center;
      }
      .news-left-list a/*news里的a全部*/ {
        float: left;
        color: #555;
        margin-left: 14px;
      }
      .news-left-list span/*news里的span全部*/ {
        float: right;
        color: #979797;
      }
      /*网页的新闻中间全部*/
      .news-center {
        width: 220px;
        background: yellow;
        padding-left: 19px;
      }
      .news-center h3 /*网页中间的新闻h3*/ {
        font-size: 12px;
        color: #505050;
        line-height: 25px;
        margin-top: 33px;
      }
      .news-center p/*网页中间的新闻p*/ {
        line-height: 24px;
        font-size: 11px;
        color: #949494;
        margin-top: 15px;
      }
      .news-right /*网页右边的新闻全部*/ {
        width: 240px;
        background: springgreen url(images/news-right.jpg) no-repeat right
          bottom;
        padding-left: 24px;
      }
      .news-right p/*网页右边的新闻p全部*/ {
        font-size: 12px;
        color: #595959;
        line-height: 24px;
        margin-top: 22px;
        margin-bottom: 22px;
      }
      /*市场项目*/
      .case/*整个市场项目*/ {
        width: 966px;
        height: 278px;
        background: skyblue;
        margin: 0 auto;
      }
      .case-title /*市场项目小标题*/ {
        font-size: 18px;
        color: #3d464d;
        margin-left: 22px;
      }
      .case dl/*市场项目dl*/ {
        width: 210px;
        /*border: 1px solid #000;*/
        margin-top: 18px;
        margin-right: 40px;
        float: left;
      }
      .case .case-last/*市场项目last最后一个*/ {
        margin-right: 0px;
      }

      .case dd /*市场项目dd*/ {
        font-size: 12px;
        color: #565656;
        line-height: 25px;
        margin-left: 3px;
        margin-top: 12px;
      }
      /*友情链接*/
      .links-wrap {
        height: 250px;
        background: #e5e5e5;
      }
      .links {
        width: 966px;
        height: 250px;
        background: #888;
        margin: 0 auto;
      }
      .links-left {
        width: 452px;
        height: 250px;
        background: violet;
        float: left;
      }
      .links-center {
        width: 152px;
        height: 250px;
        background: yellow;
        float: left;
        margin-left: 48px;
        margin-right: 50px;
      }
      .links-right {
        width: 256px;
        height: 250px;
        background: blanchedalmond;
        float: left;
      }

      .links-title {
        font-size: 15px;
        color: #7b7b7b;
        margin-top: 31px;
        margin-left: 12px;
      }
      .links hr {
        border: none;
        border-top: 1px solid #c1c1c1;
        margin-top: 11px;
      }
      .case-list {
        margin-top: 15px;
      }
      .case-list li {
        height: 24px;
        line-height: 24px;
        font-size: 11px;
        color: #666666;
        /* border: 1px solid #000; */
        background: url(images/case-list.jpg) no-repeat left center;
      }
      .case-list a {
        margin-left: 18px;
      }
      .case1 {
        width: 157px;
      }
      .case2 {
        width: 191px;
      }
      .links-left ul {
        float: left;
      }
      .links-center ul {
        margin-left: 10px;
      }
      .links-right img {
        margin-left: 35px;
        margin-top: 16px;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <div class="logo">
        <img src="./images/logo.jpg" alt="" />
      </div>
      <div class="search">
        <div class="text">SEARCH...</div>
      </div>
    </div>
    <!-- 网页的导航 nav  -->
    <div class="nav-wrap">
      <div class="nav">
        <ul>
          <li><a href="first-nav">集团介绍</a></li>
          <li><a href="">产品中心</a></li>
          <li><a href="">市场市场</a></li>
          <li><a href="">技术研发</a></li>
          <li><a href="">国际合作</a></li>
          <li><a href="">投资者关系</a></li>
          <li><a href="">新闻资讯</a></li>
          <li><a href="last-nav">人力资源</a></li>
        </ul>
      </div>
    </div>
    <!-- 网页的广告图 -->
    <div class="banner">
      <img src="images/banner.jpg" alt="" />
    </div>
    <!-- 网页的新闻 -->
    <div class="news">
      <!-- 网页的新闻左边 -->
      <div class="news-left">
        <h2 class="news-title">公司新闻</h2>
        <ul class="news-left-list">
          <li>
            <a href="">陈建成董事长出席ATB集团召开年度销售大会</a
            ><span>2021-10-15</span>
          </li>
          <li>
            <a href="">中国电器工业协会分马力电机分会在卧龙召开理事长...</a
            ><span>2021-10-15</span>
          </li>
          <li>
            <a href="">陈建成董事长出席ATB集团召开年度销售大会</a
            ><span>2021-10-15</span>
          </li>
          <li>
            <a href="">中国电器工业协会分马力电机分会在卧龙召开理事长...</a
            ><span>2021-10-15</span>
          </li>
          <li>
            <a href="">女子住酒店发现摄像头 有29G内容</a><span>2021-10-15</span>
          </li>
        </ul>
      </div>
      <!-- 网页的新闻中间 -->
      <div class="news-center">
        <h2 class="news-title">公司介绍</h2>
        <h3>
          公司成立于1984年，<br />
          经过近30年的发展
        </h3>
        <p>
          已成为电器制造，房地产开发和金融<br />
          投资三业并举的综合性跨国...
        </p>
      </div>
      <!-- 网页的新闻右边-->
      <div class="news-right">
        <h2 class="news-title">人才招聘</h2>
        <p>
          培养一流的人才，铸造一流的工程<br />
          实现员工与企业的共同发展
        </p>
        <a href="">
          <img src="images/more.jpg" alt="" />
        </a>
      </div>
    </div>
    <!-- 市场项目 -->
    <div class="case">
      <h2 class="case-title">市场项目</h2>

      <dl>
        <dt><img src="images/case.jpg" alt="" /></dt>
        <dd>已成为电器制造，房地产开发和金融 投资三业并举的综合性跨</dd>
      </dl>

      <dl>
        <dt><img src="images/case02.jpg" alt="" /></dt>
        <dd>已成为电器制造，房地产开发和金融 投资三业并举的综合性跨</dd>
      </dl>

      <dl>
        <dt><img src="images/case03.jpg" alt="" /></dt>
        <dd>已成为电器制造，房地产开发和金融 投资三业并举的综合性跨</dd>
      </dl>

      <dl class="case-last">
        <dt>
          <img src="images/case04.jpg" alt="" />
        </dt>
        <dd>已成为电器制造，房地产开发和金融 投资三业并举的综合性跨</dd>
      </dl>
    </div>
    <!--友情链接 -->
    <div class="links-wrap">
      <div class="links">
        <div class="links-left">
          <h2 class="links-title">产品中心</h2>
          <hr />
          <ul class="case-list case1">
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">大功率电机</a></li>
            <li><a href="">汽车电机</a></li>
          </ul>
          <ul class="case-list case2">
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">大功率电机</a></li>
            <li><a href="">汽车电机</a></li>
          </ul>
          <ul class="case-list">
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">大功率电机</a></li>
            <li><a href="">汽车电机</a></li>
          </ul>
        </div>
        <div class="links-center">
          <h2 class="links-title">技术研发</h2>
          <hr />
          <ul class="case-list">
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">汽车电机</a></li>
            <li><a href="">大功率电机</a></li>
            <li><a href="">汽车电机</a></li>
          </ul>
        </div>
        <div class="links-right">
          <h2 class="links-title">网络营销</h2>
          <hr />
          <img src="images/map.jpg" alt="" />
        </div>
      </div>
    </div>
  </body>
</html>
